<template>
  <div class="find-recommand">
    <div class="recommand-item" v-for="(item,index) in recommand" :key="index" @click="itemClick(index)">
      <div class="icon">
        <img :src="item.src" alt="">
      </div>
      <div class="font">
        <p>{{item.font}}</p>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "FindRecommand",
        data(){
          return{
            recommand:[
                {font:'每日推荐',src:require('../../../assets/img/find/command/command.svg'),path:'/dailyrecommand'},
                {font:'歌单',src:require('../../../assets/img/find/command/songlist.svg'),path:'/songsheetsquare'},
                {font:'排行榜',src:require('../../../assets/img/find/command/rank.svg'),path:'/rank'},
                {font:'电台',src:require('../../../assets/img/find/command/radio.svg'),path:'/radio'},
                {font:'直播',src:require('../../../assets/img/find/command/online.svg'),path:'/online'},
            ]
          }
        },
        methods:{
            itemClick(index){
                if(index == 0 ){ //每日推荐
                    this.$router.push(this.recommand[index])
                }else if(index == 1){ //歌单
                    this.$router.push(this.recommand[index])
                }else if (index == 2){ //排行榜
                    this.$router.push(this.recommand[index])
                }else if(index ==3){ //电台
                    this.$router.push(this.recommand[index])
                }else if(index == 4){  //直播
                    this.$toast.show('暂无内容')
                }
            },
        }
    }
</script>

<style scoped>
  .find-recommand{
    display: flex;
    text-align: center;
    margin-top: 15px;
  }

  .recommand-item{
    flex: 1;
  }

  .icon{
    flex: 1;
    width: 35px;
    height: 35px;
    margin: 0 auto;
    background-color: #FF1D12;
    border-radius: 50%;
  }

  .icon img{
    width: 20px;
    height: 20px;

    /*相对于父元素*/
    position: relative;
    /*高度是50%，指的是父无素的高度的50%*/
    top: 50%;
    /*向上移动自身元素高度的50%*/
    transform: translateX(-50%);
    transform: translateY(-50%);


    /*垂直居中*/
    /*position: relative;*/
    /*top: 50%;*/
    /*transform: translateY(-50%);*/

    /*水平居中*/
    /*position: relative;*/
    /*left: 50%;*/
    /*transform: translateX(-50%);*/
  }

  .font{
    margin-top: 6px;
    font-size: 10px;
    font-weight: bolder;
  }
</style>